<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重学前端</title>
    <style>
        .a {
            margin-left: 20px;
        }

        .b {
            margin-left: 20px;
        }

        .c {
            margin-left: 20px;
        }

        .d {
            margin-left: 20px;
        }

        p::first-letter {
            text-transform: uppercase;
            font-size: 2em;
            float: left;
        }

        div>p#a {
            color: green;
        }

        div>span#a {
            color: green;
        }

        div::first-line {
            color: blue;
        }

        area {
            border: 1px solid black;
        }

        .parent {
            display: flex;
            width: 300px;
            justify-content: center;
            align-content: center;
            align-items: stretch;
        }

        .child {
            width: 100px;
            outline: solid 1px;
        }

        @keyframes mykf {
            from {
                background: red;
            }

            to {
                background: yellow;
            }
        }

        div {
            animation: mykf 5s infinite;
        }
    </style>
</head>

<body>
    <div class="a">
        class="a"的div
        <div class="b">
            class="b"的div1
        </div>
        <div class="b">
            class="b"的div2
        </div>
        <div class="c">
            class="c"的div1
            <div class="b">
                class="b"的div3
            </div>
        </div>
    </div>
    <div class="d">
        class="d"的div1
    </div>
    <div class="d">
        class="d"的div2
    </div>

    <p>This is a somewhat long HTML
        paragraph that will be broken into several
        lines. The first line will be identified
        by a fictional tag sequence. The other lines
        will be treated as ordinary lines in the
        paragraph.
    </p>

    <div>
        <p id=a>First paragraph</p>
        <p>Second paragraph</p>
    </div>

    <div>
        <span id=a>First paragraph</span><br />
        <span>Second paragraph</span>
    </div>

    <p>
        Please select a shape:
        <img src="..\images\css世界\7.png" usemap="#shapes"
            alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
        <map name="shapes">
            <area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
            <area shape=rect coords="25,25,125,125" href="1.html" alt="Red box.">
            <area shape=circle coords="200,75,50" href="1.html" alt="Green circle.">
            <area shape=poly coords="325,25,262,125,388,125" href="1.html" alt="Blue triangle.">
            <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="1.html"
                alt="Yellow star.">
        </map>
    </p>

    <img src='data:image/svg+xml;charset=utf8,<svg width="600" height="400" version="1.1"
    xmlns="http://www.w3.org/2000/svg"><ellipse cx="300" cy="150" rx="200" ry="80"
    style="fill:rgb(200,100,50);
    stroke:rgb(0,0,100);stroke-width:2"/></svg>' width="100" />

    <div class="parent">
        <div class="child" style="height:300px;">
        </div>
        <div class="child">
        </div>
    </div>
    <br />
    <div class="parent">
        <div class="child">
        </div>
        <div class="child" style="height:300px;">
        </div>
    </div>
</body>
<script>
    console.log(".a .b <b>后代选择器，遍历</b>", document.querySelectorAll(".a .b"));
    console.log(".a>.b <b>子代选择器，不遍历</b>", document.querySelectorAll(".a>.b"));
    console.log(".a+.d <b>直接后继，nextsbling</b>", document.querySelectorAll(".a+.d"));
    console.log(".a~.d <b>所有后继，nextsblings</b>", document.querySelectorAll(".a~.d"));
</script>

</html>